<template>
  <div>
    <h1>【aty-form-item】 component demo</h1>
    <p>【aty-form-item】 本质</p>
    <div class="fd-aty-form-item">
      <aty-row>
        <aty-title level="4">1.aty-form-item 验证</aty-title>

        <aty-input
          elementId="jsInputItem5"
          name="input"
          value=""
          type="email"
          placeholder="请输入用户名"
          :clearable="true"
          @change="change"

          :label="'user'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="user"
          :rules="user"
          :required="true"
          :showMessage="true" />
        <!--单选框实例-->
        <aty-radio-group name="sex"
                         :dataList="sexList"
                         :value="sex"

                         @change="change"

                         :label="'sex'"
                         :labelWidth="80"
                         :labelPosition="'right'"
                         prop="sex"
                         :rules="sexRule"
                         :required="true"
                         :showMessage="true" />
        <aty-input
          elementId="jsInputItem6"
          name="input"
          value=""
          type="number"
          placeholder="请输入年龄"
          :clearable="true"
          @change="change"

          :label="'age'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="age"
          :rules="age"
          :required="true"
          :showMessage="true" />
        <aty-input
          elementId="jsInputItem4"
          name="input"
          value=""
          type="email"
          placeholder="请输入邮箱"
          :clearable="true"
          @change="change"

          :label="'email'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="email"
          :rules="email"
          :required="true"
          :showMessage="true" />
        <!--多选框实例-->
        <aty-checkbox-group
          name="love"
          :value="love"
          :dataList="dataList"
          @change="change"

          :label="'love'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="love"
          :rules="arrayRule"
          :required="true"
          :showMessage="true">
          <aty-checkbox name="love" :value="love" code="3" checkboxLabel="大众" />
          <aty-checkbox name="love" :value="love" code="4" checkboxLabel="大地飞鹰" />
        </aty-checkbox-group>

        <aty-input
          elementId="jsInputItem6"
          name="input"
          value=""
          type="text"
          placeholder="请输入学校"
          :clearable="true"
          @change="change"

          :label="'school'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="school"
          :rules="school"
          :required="true"
          :showMessage="true" />

        <aty-textarea
          elementId="jsInputItem7"
          name="input"
          value=""

          placeholder="请输入..."
          :clearable="true"
          @change="change"

          :label="'introduce'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="introduce"
          :rules="introduce"
          :required="true"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem8"
          name="input"
          value=""
          type="text"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'pattern'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="pattern"

          :required="true"
          :pattern="/^中国人$/igm"
          patternMessage="必须是中国人"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem9"
          name="input"
          value=""
          type="number"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'min  number'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="min number"

          :required="true"
          :min="5"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem10"
          name="input"
          value=""
          type="text"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'min  text'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="min text"

          :required="true"
          :min="5"
          :showMessage="true" />
        <aty-input
          elementId="jsInputItem11"
          name="input"
          value=""
          type="text"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'max  text'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="max text"

          :required="true"
          :max="5"
          :showMessage="true" />
        <aty-input
          elementId="jsInputItem12"
          name="input"
          value=""
          type="number"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'max  number'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="max number"

          :required="true"
          :max="5"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem13"
          name="input"
          value=""
          type="number"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'max min  number'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="max min number"

          :required="true"
          :min="5"
          :max="10"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem14"
          name="input"
          value=""
          type="text"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'max min  text'"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="max min text"

          :required="true"
          :min="5"
          :max="10"
          :showMessage="true" />

        <aty-input
          elementId="jsInputItem15"
          name="input"
          value=""
          type="text"
          placeholder="请输入"
          :clearable="true"
          @change="change"

          :label="'async validator '"
          :labelWidth="80"
          :labelPosition="'right'"
          prop="async validator "

          :validator="validator"
          :required="true"
          :showMessage="true" />

        <aty-select :options="cityList"
                    multiple
                    :value="val2"

                    :label="'select  multiple '"
                    :labelWidth="80"
                    :labelPosition="'right'"
                    prop="selectMultiple "

                    :min="2"
                    :required="true"
                    :showMessage="true" />
        <aty-select :options="cityList"
                    :value="val3"
                    clearable
                    placement="top"

                    :label="'select  single '"
                    :labelWidth="80"
                    :labelPosition="'right'"
                    prop="selectSingle"

                    :min="2"
                    :required="true"
                    :showMessage="true" />
      </aty-row>

      <!--    <aty-row>
                <aty-button @click="clickValidate()">validate</aty-button>
            </aty-row>
             <aty-row>
                 <aty-title level="4">2.aty-form-item label所在位置【left，right，top】</aty-title>
                 <aty-input
                         elementId="jsInputItem1"
                         name="input"
                         value="4000"
                         size="default"
                         autocomplete="on"
                         :spellcheck="true"
                         type="text"
                         placeholder="placeholder"
                         :disabled="false"
                         :maxlength="30"
                         :readonly="false"
                         :number="false"
                         :autofocus="false"
                         :clearable="true"

                         :label="'label  left：'"
                         :labelWidth="110"
                         :labelPosition="'left'"
                          prop="left"

                         ></aty-input>
                 <aty-input
                         elementId="jsInputItem2"
                         name="input"
                         value="30000"
                         size="default"
                         autocomplete="on"
                         :spellcheck="true"
                         type="text"
                         placeholder="placeholder"
                         :disabled="false"
                         :maxlength="30"
                         :readonly="false"
                         :number="false"
                         :autofocus="false"
                         :clearable="true"

                         :label="'label  right：'"
                         :labelWidth="110"
                         :labelPosition="'right'"
                         prop="right"

                         ></aty-input>
                 <aty-input
                         elementId="jsInputItem3"
                         name="input"
                         value="900"
                         size="default"
                         autocomplete="on"
                         :spellcheck="true"
                         type="text"
                         placeholder="placeholder"
                         :disabled="false"
                         :maxlength="30"
                         :readonly="false"
                         :number="false"
                         :autofocus="false"
                         :clearable="true"

                         :label="'label top'"
                         :labelWidth="110"
                         :labelPosition="'top'"
                         prop="top"

                         ></aty-input>
            </aty-row>
            <aty-row>
                <aty-title level="4">3.aty-form-item 必填</aty-title>
                <aty-input
                        elementId="jsInputItem4"
                        name="input"
                        value="20"
                        size="default"
                        autocomplete="on"
                        :spellcheck="true"
                        type="text"
                        placeholder="placeholder"
                        :disabled="false"
                        :maxlength="30"
                        :readonly="false"
                        :number="false"
                        :autofocus="false"
                        :clearable="true"

                        :label="'label required：'"
                        :labelWidth="110"
                        :labelPosition="'left'"
                        :required="true"
                        prop="required"

                        ></aty-input>
            </aty-row>-->
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      sex: {},
      love: [],
      sexList: [{
        code: '1',
        codeType: 'sex',
        name: '男'
      },
      {
        code: '2',
        codeType: 'sex',
        name: '女'
      }, {
        code: '3',
        codeType: 'sex',
        name: '其他'
      }
      ],
      dataList: [
        {
          code: '1',
          codeType: 'fruit',
          name: '苹果'
        },
        {
          code: '2',
          codeType: 'fruit',
          name: '香蕉'
        }
      ],
      validator: function (rule, value, callback) {
        const _promise = new Promise(function (resolve, reject) {
          setTimeout(function () {
            reject('验证失败')
          }, 2000)
        })
        _promise.then(function () {
          callback()
        }, function (data) {
          callback(data)
        })
      },
      sexRule: [
        { required: true, message: '性别为必填项' },
        { type: 'object', message: '性别项的值必须是object' }
      ],
      // 数组规则
      arrayRule: [
        { required: true, type: 'array', min: 1, message: '至少选择一个' }
      ],
      user: [
        { required: true, message: '用户名不能为空' },
        { type: 'string', min: 10, max: 20, message: '用户名长度必须在10-20之间' }
      ],
      age: [
        { required: true, message: '年龄不能为空' },
        { type: 'number', message: '年龄必须为数字' },
        { type: 'number', min: 1, max: 100, message: '年龄必须在0-100之间' }
      ],
      email: [
        { required: true, message: '邮箱不能为空' },
        { type: 'email', message: '邮箱格式不正确' }
      ],
      school: [
        { required: true, message: '学校不能为空' },
        { type: 'string', len: 5, message: '学校长度为5' }
      ],
      introduce: [
        { required: true, message: '个人介绍不能为空' }
      ],
      val3: {},
      val2: [{
        code: 'shanghai',
        codeType: 'shanghai',
        name: '上海市'
      }, {
        code: 'shenzhen',
        codeType: 'shenzhen',
        name: '深圳市'
      }, {
        code: 'hangzhou',
        codeType: 'hangzhou',
        name: '杭州市'
      }],
      // 城市
      cityList: [
        {
          code: 'beijing',
          codeType: 'beijing',
          name: '北京市'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市'
        },
        {
          code: 'hangzhou',
          codeType: 'hangzhou',
          name: '杭州市'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市'
        },
        {
          code: 'guangdong',
          codeType: 'guangdong',
          name: '广东省'
        },
        {
          code: 'guangxi',
          codeType: 'guangxi',
          name: '广西'
        },
        {
          code: 'hainan',
          codeType: 'hainan',
          name: '海南省'
        },
        {
          code: 'xinjiang',
          codeType: 'xinjiang',
          name: '新疆'
        }
      ]
    }
  },
  methods: {
    clickValidate () {
      /*
       *  let formItem= Artery.findComponentDownward(this,'aty-form-item');
       * formItem.validate('', function (errors) {
       * console.log(errors)
       *});
       */
    },
    change: function (value, name, index) {
      this[name] = value
      // console.log(value,name,index)
    }
  },
  mounted () {
    // console.log(this.$refs)
  }
}
</script>
<style lang="less"  type="text/less"  >
    .fd-aty-form-item {
        padding: 30px;
        text-align:left;
        .aty-row {
            padding: 5px 0;
        }
    }
</style>
